<template>
  <div class="barCharts" ref="barCharts"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: "rgba(255,255,255,0.1)",
      },
    },
  },
  grid: {
    bottom: 25,
    left: 40,
    right: 25,
    top: 20,
  },
  xAxis: {
    type: "category",
    data: null,
    axisLabel: {
      show: true,
      textStyle: {
        color: "#ccc",
        fontSize: 12,
      },
    }, //刻度标签
    axisLine: {
      show: true,
      lineStyle: {
        width: 2,
        color: "#383860",
      },
    }, //轴线样式
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        width: 2,
        color: "#383860",
      },
    }, //坐标轴刻度
  },
  yAxis: {
    axisLabel: {
      show: true,
      textStyle: {
        color: "#ccc",
        fontSize: 12,
      },
    }, //刻度标签
    axisLine: {
      show: true,
      lineStyle: {
        width: 2,
        color: "#383860",
      },
    }, //轴线样式
    splitLine: {
      show: true,
      lineStyle: {
        width: 2,
        color: "#383860",
      },
    }, //显示分隔线
    axisTick: {
      show: false,
    }, //坐标轴刻度
    type: "value",
  },
  series: [
    {
      data: null,
      type: "bar",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#574D9E" },
          { offset: 0.5, color: "#3F9BCD" },
          { offset: 1, color: "#225BA2" },
        ]),
      },
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      this.chart = echarts.init(this.$refs.barCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      options.xAxis.data = this.echartsData.arr.map((item) => {
        return item.name;
      });
      options.series[0].data = this.echartsData.arr.map((item) => {
        return item.value;
      });
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.barCharts {
  width: 100%;
  height: 100%;
}
</style>
